<template>
  <div class="page-content">
    <div class="condition">
      <div class="condition-content">
        <Form ref="queryForm" label-position="right" :model="queryForm" inline>
          <Row>
            <Col span="6">
              <FormItem label="系统名称：" prop="systemId" :labelWidth="100">
                <Select v-model="queryForm.systemId" filterable>
                  <Option
                    v-for="system in systemList"
                    :value="system.id"
                    :label="system.name"
                    :key="system.id"
                  ></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="是否是菜单：" prop="isMenu" :labelWidth="100">
                <Select v-model="queryForm.isMenu">
                  <Option value="false" label="否"></Option>
                  <Option value="true" label="是"></Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="权限名：" prop="name" :labelWidth="100">
                <Input type="text" v-model="queryForm.name" placeholder="权限名" />
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="query('queryForm')">查询</Button>
              </FormItem>
            </Col>
            <Col span="3">
              <FormItem>
                <Button type="primary" @click="handlerReset('queryForm')">重置</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
    </div>
    <div class="operation">
      <Row>
        <Col span="24">
          <Button type="primary" @click="openAddPage">新增</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openModPage">修改</Button>
          <Divider type="vertical"></Divider>
          <Button type="primary" @click="openDelPage">删除</Button>
        </Col>
      </Row>
    </div>
    <div class="content">
      <Table
        border
        stripe
        :columns="columns"
        :data="data"
        height="480"
        highlightRow
        @on-row-click="rowClick"
      >
        <template slot="footer">
          <Page
            show-total
            :total="total"
            @on-change="pageChange"
            show-sizer
            :pageSizeOpts="[5,10,15,20]"
            @on-page-size-change="pageSizeChange"
          ></Page>
        </template>
      </Table>
    </div>
    <!--添加页面-->
    <Modal
      :title="isAddFlag?'添加':'修改'"
      :closable="true"
      :maskClosable="true"
      v-model="addPageFlag"
      @on-ok="addOK('addForm')"
      @on-cancel="addCancel('addForm')"
    >
      <Form ref="addForm" :model="tmpForm">
        <FormItem label="系统名：" prop="systemId" :labelWidth="100">
          <Select v-model="tmpForm.systemId" filterable>
            <Option
              v-for="system in systemList"
              :value="system.id"
              :label="system.name"
              :key="system.id"
            ></Option>
          </Select>
        </FormItem>
        <FormItem label="是否是菜单：" prop="isMenu" :labelWidth="100">
          <Select v-model="tmpForm.isMenu">
            <Option value="false" label="否"></Option>
            <Option value="true" label="是"></Option>
          </Select>
        </FormItem>
        <FormItem label="权限名：" prop="name" :labelWidth="100">
          <Input type="text" v-model="tmpForm.name" placeholder="权限名" />
        </FormItem>
        <FormItem label="备注：" prop="description" :labelWidth="100">
          <Input type="text" v-model="tmpForm.description" placeholder="备注" />
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  addRightApi,
  deleteRightApi,
  modifyRightApi,
  queryRightApi,
} from '@/api/rights'
import { getSystemListApi } from '@/api/system'
export default {
  name: 'rights-manager',
  data() {
    return {
      queryForm: {
        systemId: '',
        isMenu: '',
        name: '',
      },
      //系统列表
      systemList: [],
      //角色列表
      roleList: [],
      tmpForm: {}, //添加用户时需要临时容器去装载
      isAddFlag: false, //是否是添加标志
      delId: '', //需要删除的用户ID
      page: {
        pageNum: 1,
        pageSize: 10,
      },
      columns: [
        {
          title: '系统',
          key: 'systemName',
        },
        {
          title: '菜单',
          key: 'isMenu',
          render: (h, params) => {
            let text = ''
            if (params.row.isMenu == 1) {
              text = '是'
            } else {
              text = '否'
            }
            return h('span', text)
          },
        },
        {
          title: '权限名',
          key: 'name',
        },
        {
          title: '备注',
          key: 'description',
        },
        {
          title: '创建时间',
          key: 'genTime',
        },
      ],
      data: [], //用户数据
      total: 0,
      addPageFlag: false, //添加页面模态窗口标志
      tblCurIndex: undefined, //选中角标
      tblCurData: {}, //选中数据
    }
  },
  methods: {
    query(name) {
      let condition = this.$refs[name].model
      if (condition.systemId == undefined || condition.systemId == '') {
        this.$Modal.warning({
          title: '提示',
          content: '请选择系统',
        })
        return
      }
      var param = {}
      param.condition = condition
      param.page = this.page
      queryRightApi(param)
        .then((response) => {
          this.data = response.data
          this.total = response.page.total
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handlerReset(name) {
      this.$refs[name].resetFields()
    },
    pageChange(pageNum) {
      this.page.pageNum = pageNum
      this.query('queryForm')
    },
    pageSizeChange(pageSize) {
      this.page.pageSize = pageSize
      this.query('queryForm')
    },
    openAddPage() {
      this.addPageFlag = true
      this.isAddFlag = true
    },
    openModPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择权限')
        return
      }
      this.isAddFlag = false
      this.addPageFlag = true
      this.tmpForm = Object.assign({}, this.tblCurData)
      this.tmpForm.isMenu = this.tmpForm.isMenu + ''
    },
    openDelPage() {
      if (this.tblCurIndex == undefined) {
        this.$Message.warning('请选择需要删除用户')
        return
      }
      this.$Modal.confirm({
        title: '删除用户',
        content: '请确认是否要删除' + this.tblCurData.name + '用户?',
        onOk: this.delOK,
      })
    },
    addOK(name) {
      if (this.isAddFlag) {
        addRightApi(this.tmpForm).then((data) => {
          this.$refs[name].resetFields()
          this.$Message.success('添加权限成功')
          this.query('queryForm')
        })
      } else {
        modifyRightApi(this.tmpForm).then((data) => {
          this.$refs[name].resetFields()
          this.$Message.success('修改权限成功')
          this.query('queryForm')
        })
      }
    },
    delOK() {
      deleteRightApi(this.tblCurData.id)
        .then((data) => {
          this.$Message.success('删除成功')
          this.query('queryForm')
        })
        .catch((error) => console.log(error))
    },
    addCancel(name) {
      this.$refs[name].resetFields()
    },
    rowClick(data, index) {
      this.tblCurIndex = index
      this.tblCurData = data
    },
  },
  created: function () {
    getSystemListApi()
      .then((data) => {
        this.systemList = data
      })
      .catch((error) => console.log(error))
  },
  watch: {},
}
</script>
<style lang="less" scoped>
.page-content > .condition {
  border: 1px solid #b8c7cb;
}

.page-content > .condition > .condition-content {
  margin-top: 10px;
}

.page-content > .operation {
  margin-top: 15px;
  background-color: rgba(113, 182, 114, 0.1);
}
</style>